<template>
    <div style="border:1px solid #dcdfe6;padding: 10px;border-radius: 5px;margin-bottom: 10px;">
      <DynamicQueryForm
      :defaultParams="searchParamArray" :defaultProperty="searchPropertyArray"
      @submit="handleSearch"></DynamicQueryForm>
      <el-row style="padding:10px">
          <el-col :span="4"> 
            <el-button  @click="add">新建</el-button>
            <el-dropdown style="margin-left:10px">
              <el-button  type="primary">
                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="exportExcel">导出</el-dropdown-item>   
                </el-dropdown-menu>
              </template>
            </el-dropdown>
        </el-col>
        
        <el-col :span="19"></el-col>
      </el-row>
    </div>

    
    <el-card  shadow="never" style="overflow-y: auto;">
      <el-table :data="tableData" border style="width: 100%;max-height: 40%" stripe="true" size="small" highlight-current-row="true">
            <el-table-column type="index" width="50" />
            <el-table-column prop="num" label="租户编码" width="180" />
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="address" label="地址" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                  编辑
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-pagination background layout="total,sizes,prev, pager, next" 
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
       :page-sizes="[100, 200, 300, 400]"  
        :total="1000" 
        style="padding: 20px; display: flex;
        justify-content: center;" />

        <EditView :dialogShow="editShow" :form-data="editData" @submit="editResultCall"></EditView>
</template>
<script  setup lang="ts">
  import DynamicQueryForm from '@/components/lengyucomponents/dynamicQueryForm2.vue';
  import EditView from './EditView.vue';
  import type {SelectProperty,SearchParam} from '@/components/lengyucomponents/dynamicQueryForm2.vue';
  import { ElMessage } from 'element-plus'
  import { ref, watch, watchEffect } from 'vue';
import type { TenantDto } from './model';


  const tableData:TenantDto[] = [
    {
      id:'a',
      num:'a',
      name: '铁建工科',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id:'b',
      num:'b',
      name: '实验检测中心',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id:'c',
      num:'c',
      name: '码头',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
      {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
       {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
         {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
         {
      id:'d',
      num:'d',
      name: '租户1',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]

  const pageSize = ref(100)
  const currentPage = ref(1)
  let editShow = ref(true)
  let editData:TenantDto = {}

  watch(pageSize, (newValue, oldValue)=>{
    console.log(`pageSize is: ${pageSize.value}`)
  })
  watch(currentPage, (newValue, oldValue)=> {
    console.log(`currentPage is: ${currentPage.value}`)
  })

  function editResultCall(refresh:boolean){
    editShow.value = false
    ElMessage.info('编辑页面回调'+ refresh)
  }
  function handleEdit(index: number, row: TenantDto) {
    console.log(index, row)
    ElMessage.info('点击编辑按钮')
  }
  function handleDelete(index: number, row: TenantDto) {
    console.log(index, row)
    ElMessage.error('点击删除按钮')
  }

  function exportExcel(){
    ElMessage.error('点击导出按钮')
  }

  function add(){
    ElMessage.error('点击新增按钮')
  }

  const searchPropertyArray:SelectProperty[] = [
    {
      value:"name",
      type:"string",
      label:"名称"
    },
     {
      value:"id",
      type:"number",
      label:"id"
    }
  ]
  const searchParamArray:SearchParam[] = [
    {
      propId: "name",
      propName: "名称",
      value:"",
      relation:"=",
    }
  
  ]

  const defaultValue={ daterange: '', endDaterange: '' }
  const handleSearch = async (paramsArray:any) => {
    try {
      console.log("开始查询",paramsArray)
      ElMessage.info('开始查询:' + JSON.stringify(paramsArray))
      // 3. 发起请求
      // const { data } = await api.getList(params)
      // tableData.value = data.list
    } catch (error) {
      console.error('查询失败', error)
    }
}
</script>
<style>
.card {
    width: 100%;
    height: 200px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>